<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" @click="showDialogAdd" style="margin-bottom:10px">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <zk-table :data="cateList" border :columns="columns" index-text="序号" show-index :selection-type="false"
        :expand-type="false">
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="{row}">
          <div style="font-size:18px">
            <i class="el-icon-success" style="color:lightgreen" v-if="row.cat_deleted  == false"></i>
            <i class="el-icon-error" style="color:red" v-else></i>
          </div>
        </template>
        <!-- 排序  -->
        <template slot="order" slot-scope="{row}">
          <el-tag v-if="row.cat_level == 0">一级</el-tag>
          <el-tag v-else-if="row.cat_level == 1" type="success">二级</el-tag>
          <el-tag v-else type="warning">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="{row}">
          <el-button type="primary" icon="el-icon-edit" @click="showDialogEdit(row)" size="mini"
            style="margin-right:14px">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delCate(row)">
            <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除
            </el-button>
          </el-popconfirm>

        </template>
      </zk-table>

      <!-- 分页器 -->
      <el-pagination style="text-align:center;margin-top:20px" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3, 5, 10]"
        :page-size="queryInfo.pagesize" layout="prev, pager, next, jumper,->,total, sizes" :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加分类的框子 -->
    <el-dialog title="添加分类" :visible.sync="dialogVisibleAdd" width="50%" @close="addCateDialogClosed">
      <el-form ref="addCateFromRef" :rules="addCateFromRules" :model="addCateFrom" label-width="100px">
        <el-form-item label="分类名称 : " prop="cat_name">
          <el-input v-model="addCateFrom.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- 级联选择组件 -->
          <el-cascader v-model="selectedKeys" placeholder="空的话为一级菜单哦~" clearable :options="parentCateList"
            :props="cascaderProps" @change="parentCateChange">
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分类的框子 -->
    <el-dialog title="修改分类" :visible.sync="dialogVisibleEdit" width="50%">
      <el-form ref="editCateFromRef" :rules="addCateFromRules" :model="editCateList" label-width="100px">
        <el-form-item label="分类名称 : " prop="cat_name">
          <el-input v-model="editCateList.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Cate",
    data() {
      return {
        //商品分类数据
        cateList: [],
        //查询条件
        queryInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 5
        },
        //总数据条数
        total: 0,
        dialogVisibleAdd: false, //添加分类的框子展示与隐藏
        dialogVisibleEdit: false, //修改分类的框子展示与隐藏
        //添加分类表单的数据
        addCateFrom: {
          cat_pid: 0,
          cat_name: "",
          //0为一级分类,1为二级分类,2为三级分类
          cat_level: 0
        },
        //父级分类数据
        parentCateList: [],
        //级联选择器收集的父级id
        selectedKeys: [],
        //级联选择组件的配置数据
        cascaderProps: {
          value: "cat_id",
          label: "cat_name",
          chuldren: "children",
          expandTrigger: 'hover',
          checkStrictly: true
        },
        //添加分类表单的规则
        addCateFromRules: {
          cat_name: [{
            required: true,
            message: '不能为空哦~',
            trigger: 'blur'
          }, ]
        },
        //为table指定列的定义
        columns: [{
            label: "分类名称",
            prop: "cat_name",
          },
          {
            label: "是否有效",
            type: "template",
            template: "isok"
          },
          {
            label: "排序",
            type: "template",
            template: "order"
          },
          {
            label: "操作",
            type: "template",
            template: "opt"
          },
        ],
        //编辑按钮分类需要的参数
        editCateList: {
          id: "",
          cat_name: "",
        },
        row: {}
      }
    },
    methods: {
      //获取商品分类数据
      async getCateList() {
        let result = await this.$requests.get("categories", {
          params: this.queryInfo
        })
        if (result.meta.status == 200) {
          this.cateList = result.data.result
          this.total = result.data.total
        } else {
          this.$message.error("获取信息失败")
        }
      },
      // 监听pagesize改变的方法
      handleSizeChange(page) {
        this.queryInfo.pagesize = page
        this.getCateList()

      },
      // 监听pagenum的改变
      handleCurrentChange(count) {
        this.queryInfo.pagenum = count
        this.getCateList()
      },
      //添加分类按钮的回调
      showDialogAdd() {
        this.getparentCateList()
        this.dialogVisibleAdd = true
      },
      //获取父级分类的数据列表
      async getparentCateList() {
        let result = await this.$requests.get('categories', {
          params: {
            type: 2,
          }
        })
        if (result.meta.status == 200) {
          this.parentCateList = result.data
        } else {
          return this.$message.error("获取数据失败")
        }
      },
      //选项发生变化触发的回调
      parentCateChange() {
        //选中父级分类了
        if (this.selectedKeys.length > 0) {
          //分类父级id
          this.addCateFrom.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
          //分类等级
          this.addCateFrom.cat_level = this.selectedKeys.length
          return
        } else {
          //没选父级分类
          //分类父级id
          this.addCateFrom.cat_pid = 0
          //分类等级
          this.addCateFrom.cat_level = 0
        }
      },
      //添加分类对话框的确认按钮回调
      addCate() {
        this.$refs.addCateFromRef.validate(async (valid) => {
          if (valid) {
            let result = await this.$requests.post("categories", this.addCateFrom)
            if (result.meta.status == 201) {
              this.$message.success("添加分类成功")
              this.getCateList()
              this.dialogVisibleAdd = false
            } else {
              this.$message.error("添加分类失败")
            }
          } else {
            return;
          }
        });
      },
      //添加分类对话框清空数据 重置表单
      addCateDialogClosed() {
        this.$refs.addCateFromRef.resetFields()
        this.selectedKeys = []
        this.addCateFrom.cat_pid = 0
        this.addCateFrom.cat_level = 0
      },
      //修改按钮的回调
      showDialogEdit(row) {
        this.dialogVisibleEdit = true
        this.editCateList.id = row.cat_id
        this.editCateList.cat_name = row.cat_name
      },
      //修改框子确定按钮的回调
      editCate() {
        this.$refs.editCateFromRef.validate(async (valid) => {
          if (valid) {
            let result = await this.$requests.put(`categories/${this.editCateList.id}`, {
              cat_name: this.editCateList.cat_name
            })
            if (result.meta.status == 200) {
              this.$message.success("修改信息成功")
              this.getCateList()
              this.dialogVisibleEdit = false
            } else {
              this.$message.error("获取信息失败")
            }
            console.log(result)
          } else {
            return;
          }
        });
      },
      //删除按钮的回调
      async delCate(row) {
        console.log(row)
        let result = await this.$requests.delete(`categories/${row.cat_id}`)
        if (result.meta.status == 200) {
          this.$message.success("删除成功")
          this.getCateList()
        } else {
          return this.$message.error("请求数据失败")
        }
      }
    },
    mounted() {
      this.getCateList()
    }
  }

</script>

<style>

</style>
